<script setup lang='ts'>
import { ref,onMounted } from 'vue'

// 定义变量
// 当日是周几
const week = ref('')
// 实时时间
const nowTime = ref('')

// 定义函数

onMounted(() => {
  nowTimes()
})

// 获取实时时间
const getdataTime = () => {
  let year = new Date().getFullYear()
  let month = new Date().getMonth() + 1 < 10 ? '0' + (new Date().getMonth() + 1) : new Date().getMonth() + 1
  let date = new Date().getDate() < 10 ? '0' + new Date().getDate() : new Date().getDate()
  let hh = new Date().getHours() < 10 ? '0' + new Date().getHours() : new Date().getHours()
  let mm = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes()
  let ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds()
  let wk = new Date().getDay()
  let weeks = [ '星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六' ]
  week.value = weeks[wk]
  nowTime.value = year + '年' + month + '月' + date + '日' + ' ' + hh + ':' + mm + ':' + ss
}

// 定时器
const nowTimes = () => {
  setInterval(getdataTime, 1000)
}

</script>

<template>
  <div class="home-head-main-box">
    <div class="logo-box" />
    <div class="title-box">
      堆取料机智能感知与监控诊断监测平台
    </div>
    <div class="time-box">
      {{ nowTime }}&emsp;{{ week }}
    </div>
  </div>
</template>

<style scoped lang=scss>
.home-head-main-box {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  background-image: url("../../../assets/imgs/头部.png");
  background-size: 100% 100%;

  >div {
    /* border: 1px solid green; */
  }

  .logo-box,
  .time-box {
    width: 27%;
    height: 100%;
  }

  .logo-box {
    width: 24%;
    height: 70%;
    margin-right: 1.5%;
    margin-left: 1.5%;

    /* margin-top: 2.5%; */
    background-image: url("../../../assets/imgs/logo.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }

  .title-box {
    display: flex;
    justify-content: center;
    width: 46%;
    height: 100%;
    padding-top: 1%;
    color: #19d8d8;
    font-size: 38px;

    /* background-image: url("../../../assets/imgs/head.gif");
    background-size: 100% 100%; */
  }

  .time-box {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-top: 1%;
    padding-right: 3%;
    color: #fff;
    font-size: 18px;
  }
}

</style>